<template>
   <div>
       <!-- 首页 > 全部结果 > 小米10 -->
        <div id="mytype">
            <div class="type-title">首页 > 全部结果 > 小米10</div>
        </div>
        <!-- 分类 -->
        <div id="type">
            <div class="type-type">
                <i>分类</i>                
                <ul>
                   <li v-for="(item,i) in type" :key="i">{{item}}</li>
                </ul>
            </div>
        </div>
        <!-- 综合 -->
        <div id="synthesize">
            <!-- 综合上边 -->
           <div id="synthesize-top">
               <div class="width100">
                    <div class="synthesize-left">
                        <ul>
                            <li>综合</li>
                            <li class="color">|</li>
                            <li>新品</li>
                            <li class="color">|</li>
                            <li>销量</li>
                            <li class="color">|</li>
                            <li>价格<i class="el-icon-bottom"></i><i class="el-icon-top"></i></li>
                        </ul>
                    </div>
                    <div class="synthesize-right">
                        <div>收货地 <button>北京 北京市</button></div>
                        <p><input type="checkbox"> 促销</p>
                        <p><input type="checkbox"> 分期</p>
                        <p><input type="checkbox"> 仅看有货</p>
                    </div>
               </div>
           </div>
           <!-- 综合中间 -->
           <div id="synthesize-center">
               <div>
                   <ul>
                       <li>d</li>
                       <li>d</li>
                       <li>d</li>
                       <li>d</li>
                       <li>d</li>
                   </ul>
               </div>
           </div>
           <!-- 综合下面 -->
           <div id="synthesize-bottom">

           </div>
        </div>
   </div>
</template>

<script>
export default {
    name: 'mytype',
    data() {
        return {
            type:['全部','手机保护壳','电源电池','手机配件','手机贴膜','手机','服务']
        };
    },
    created() {
    },
    methods: {

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
// 最上边
#mytype{
    width: 100%;
    height: 40px;
    background-color: #F5F5F5;
    .type-title{
        width: 1226px;
        height: 40px;
        margin: 0 auto;
        line-height: 40px;
        font-size: 12px;
        color: #757575;
    }
}
// 分类
#type{
    width: 100%;
    height: 84px;
    .type-type{
        width: 1226px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        font-size: 14px;
        i{
            color: #B7B7CC;
            line-height: 84px;
            padding-right: 40px;
        }
        ul{
            display: flex;
            justify-content: space-around;
            align-items: center;
            li{
                padding: 46px;
            }
        }
    }
}
// 综合
#synthesize{
    width: 100%;
    // 上边
    #synthesize-top{
        width: 100%;
        height: 80px;
        background-color: brown;
        .width100{
            width: 1226px;
            line-height: 80px;
            height: 80px;
            background-color: chartreuse;
            margin: 0 auto;
            .synthesize-left{
                float: left;
                ul{
                    width: 340px;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    padding-left: 20px;
                    li{
                        color: #424242;
                    }
                    .color{
                        color: #E0E0E0;
                    }
                }
            }
            .synthesize-right{
                width: 400px;
                color: #424242;
                float: right;
                display: flex;
                justify-content: space-around;
                align-items: center;
                div{
                    button{
                        padding:2px 10px;
                    }
                }
            }
        }
    }
    // 中间
    #synthesize-center{
        width: 100%;
        div{
            width: 1226px;
            margin: 0 auto;
            ul{
                display: flex;
                width: 100%;
                
                li{
                    width: 296px;
                    float: left;
                    height: 430px;
                    background-color: salmon;
                    // margin:0 10px;
                }
            }
        }
    }
    #synthesize-bottom{
        width: 100%;
    }

}
</style>
